<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>

</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
#handler{cursor:nw-resize}
</style>
</HEAD>

<BODY>
<table id="d_box" border="1" style="border-collapse:collapse;border-color:red;width:500px;height:300px;position:absolute;" cellpadding="0" cellspacing="0">
<tr><td id='bar' style="background-color:blue;height:20px;cursor:move" colspan='2' onmousedown="drag(event)">Title</td></tr>
<tr><td colspan='2'>some words</td></tr>
<tr><td style="width:90%">&nbsp;</td><td onmousedown="resize(event)" id="handler" style="background:transparent url(images/br.gif) no-repeat;width:12px;height:12px;">&nbsp;</td></tr>
</table>
<script>
function $(id){return document.getElementById(id)}
function resize(e){
	var e = e||window.event;
	var o_x = e.clientX,o_y = e.clientY
	var o_width = $('d_box').clientWidth,o_height = $('d_box').clientHeight
	if(document.addEventListener){
		document.addEventListener('mousemove',moveHandler,false)
		document.addEventListener('mouseup',upHandler,false)
	}else{
		document.attachEvent('onmouseup',upHandler)
		document.attachEvent('onmousemove',moveHandler)
	}

	function moveHandler(e){
		var e = e||window.event;
		var d_x = e.clientX - o_x,d_y = e.clientY - o_y;
		$('d_box').style.width = Math.max(o_width + d_x,0)
		$('d_box').style.height = Math.max(o_height + d_y,0)
	}

	function upHandler(e){
		if(document.removeEventListener){
			document.removeEventListener('mousemove',moveHandler,false)
			document.removeEventListener('mouseup',upHandler,false)
		}else{
			document.detachEvent('onmousemove',moveHandler)
			document.detachEvent('onmouseup',upHandler)
		}
	}
}

function drag(e){
	var e = e||window.event
	var o_x = e.clientX,o_y = e.clientY;
	var o_left = $('d_box').offsetLeft,o_top = $('d_box').offsetTop;
	if(document.addEventListener){
		document.addEventListener('mousemove',moveHandler,false)
		document.addEventListener('mouseup',upHandler,false)
	}else{
		document.attachEvent('onmouseup',upHandler)
		document.attachEvent('onmousemove',moveHandler)
	}

	function moveHandler(e){
		var e = e||window.event;
		var d_x = e.clientX - o_x,d_y = e.clientY - o_y;
		$('d_box').style.left = Math.max(o_left + d_x,0) + 'px'
		$('d_box').style.top = Math.max(o_top + d_y,0) + 'px'
	}

	function upHandler(e){
		if(document.removeEventListener){
			document.removeEventListener('mousemove',moveHandler,false)
			document.removeEventListener('mouseup',upHandler,false)
		}else{
			document.detachEvent('onmousemove',moveHandler)
			document.detachEvent('onmouseup',upHandler)
		}
	}
}

</script>
</BODY>
</HTML>
